<template>
  <div class="lyric-wrap" ref="lyricWrapRef">
    <p
        v-for="(line, index) in $store.state.lyric"
        class="text-hidden"
        :style="{
      color: currenIndex === index ? 'red' : 'black',
      fontSize: currenIndex === index ? '18px' : '16px',
    }"

        :key="index"
    >
      <!--      {{$store.state.lyric}}-->
      {{ line.str }}
    </p>
  </div>

</template>

<script setup>

import {getmusicUrlApi, getLyricApi, getMusicListByIdsApi} from '~/commonApi/api'
import {reactive, watch, nextTick, ref, onMounted, computed} from "vue";
import {toast} from "~/uilti/tool.js";
import {useStore} from "vuex";

const lyricWrapRef = ref(null)
const props = defineProps({
  musicId: {
    type: Number,
    required: true
  },
  /* 当前时间 */
  currenTime: {
    type: Number,
    required: false
  },
  lyricAlign: {
    type: String,
    default: 'center'
  },
  width: {
    type: Number,
    default: 600
  }
})

/* 获取歌词 */
const lyric = ref([])//保存歌词
const getLyric = async () => {
  const res = await getLyricApi(props.musicId)
}
watch(() => props.musicId, (newValue, oldValue) => {
  if (newValue) {
    getLyric()
  }
}, {immediate: true,})

//传入初始歌词文本text
const playStatus = reactive({
  word: []
})
const store = useStore()

const currenIndex = ref(0)
watch(() => store.state.currenIndex, (v, o) => {
  currenIndex.value = v
  console.log(currenIndex.value)
  lyricWrapRef.value.scrollTop = 40 * v;
})


</script>

<style lang="less" scoped>
.lyric-wrap {
  width: 600px;
  height: 400px;
  overflow-y: scroll;
  text-align: center;
  scrollbar-width: thin;
  //margin: 40px 0 0 20px;
  color: #666666;
  font-size: 14px;
  line-height: 40px;
  transition: all 0.8s linear;

  &::-webkit-scrollbar {
    width: 1px;
  }

  p {
    height: 40px;
  }
}

@media screen and(max-width: 768px) {
  .lyric-wrap {
    width: 100%;
    margin: 20px auto;
    font-size: 13px;

    p {
      height: 40px;
    }
  }
}

.text-hidden {
  margin: 0;
}

.text-hidden&hover {
  cursor: pointer;
  color: green;
}
</style>